<template>
  <div>
    <el-tag effect="dark" class="my-tag">
      <svg class="icon" width="20" height="20" style="vertical-align: -3px">
        <use xlink:href="#icon-wenzhang"/>
      </svg>
      公告信息
    </el-tag>
    <el-form
      :model="notice"
      :rules="rules"
      ref="ruleForm"
      label-width="150px"
      class="demo-ruleForm"
    >
      <el-form-item label="标题" prop="title">
        <el-input maxlength="30" v-model="notice.title"></el-input>
      </el-form-item>


      <el-form-item label="内容" prop="content">
        <mavon-editor ref="md" @imgAdd="imgAdd" v-model="notice.content"/>
      </el-form-item>

      <el-form-item label="是否启用" prop="status">
        <el-tag :type="notice.status === false ? 'danger' : 'success'" disable-transitions>
          {{ notice.status === false ? "否" : "是" }}
        </el-tag>
        <el-switch v-model="notice.status"></el-switch>
      </el-form-item>
    </el-form>
    <div class="myCenter" style="margin-bottom: 22px">
      <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
      <el-button type="danger" @click="resetForm('ruleForm')">重置所有修改</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: this.$route.query.id,
      notice: {
        title: "",
        content: "",
        status: true
      },
      rules: {
        title: [
          {required: true, message: "请输入标题", trigger: "change"},
        ],
        content: [
          {required: true, message: "请输入内容", trigger: "change"},
        ],
        status: [
          {required: true, message: "是否启用评论", trigger: "change"},
        ]
      },
    };
  },

  computed: {},

  watch: {},

  created() {
  },

  mounted() {
    this.getNotice();
  },

  methods: {
    imgAdd(pos, file) {
      let form = new FormData();
      form.append("file", file);
      this.$createHttp.uploadFile(form).then((res) => {
        if (res.code === 200) {
          this.$refs.md.$img2Url(pos, res.data.path);
        } else {
          this.$message({
            message: "上传失败，请重试",
            type: "error",
          });
        }
      });
    },
    getNotice() {
      if (this.id) {
        this.$createHttp.noticeInfo(this.id).then((res) => {
          if (res.code === 200) {
            for (let i in this.notice) {
              this.notice[i] = res.data[i]
            }
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        });
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.$common.isEmpty(this.id)) {
            this.saveNotice(this.notice);
          } else {
            this.notice.id = this.id;
            this.saveNotice(this.notice);
          }
        } else {
          this.$message({
            message: "请完善必填项！",
            type: "error",
          });
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      if (!this.$common.isEmpty(this.id)) {
        this.getNotice();
      }
    },
    saveNotice(value) {
      this.$confirm("确认保存？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "success",
        center: true,
      }).then(() => {
        if (value.id) {
          this.$createHttp.updateNotice(value).then((res) => {
            if (res.code === 200) {
              this.$message({
                message: "保存成功",
                type: "success",
              });
              setTimeout(() => {
                this.$router.go(-1)
              })
            } else {
              this.$message({
                message: res.msg,
                type: "success",
              });
            }
          });
        } else {
          this.$createHttp.addNotice(value).then((res) => {
            if (res.code === 200) {
              this.$message({
                message: "保存成功",
                type: "success",
              });
              this.$router.go(-1)
            } else {
              this.$message({
                message: res.msg,
                type: "success",
              });
            }
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.my-tag {
  margin-bottom: 20px;
  width: 100%;
  text-align: left;
  background: var(--lightYellow);
  border: none;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: var(--black);
}
</style>
